<template>
  <a-form style="max-width: 550px" :model="formValue" :rules="rules" ref="formRef">
    <a-form-item label="商品图片(大)">
      <a-space align="center">
        <span>宽度：</span>
        <a-input v-model="formValue.bigWidth" style="width: 80px" placeholder="宽度像素" />
        <span>高度：</span>
        <a-input v-model="formValue.bigHeight" style="width: 80px" placeholder="高度像素" />
      </a-space>
    </a-form-item>

    <a-form-item label="商品图片(小)">
      <a-space align="center">
        <span>宽度：</span>
        <a-input v-model="formValue.smallWidth" style="width: 80px" placeholder="宽度像素" />
        <span>高度：</span>
        <a-input v-model="formValue.smallHeight" style="width: 80px" placeholder="高度像素" />
      </a-space>
    </a-form-item>

    <a-form-item label="水印透明度" name="watermarkClarity">
      <a-input-number
        v-model="formValue.watermarkClarity"
        :show-button="false"
        placeholder="请输入水印透明度"
      />
    </a-form-item>

    <a-form-item label="水印图片" name="watermarkClarity">
      <a-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
        <a-button>上传文件</a-button>
      </a-upload>
    </a-form-item>

    <a-form-item label="水印位置" name="watermarkPlace">
      <a-select
        placeholder="请选择价格精确方式"
        :options="watermarkPlaceList"
        v-model="formValue.watermarkPlace"
      />
    </a-form-item>

    <a-form-item label="价格精确位数" name="pricePreciseNum">
      <a-select
        placeholder="请选择价格精确位数"
        :options="pricePreciseNumList"
        v-model="formValue.pricePreciseNum"
      />
    </a-form-item>

    <a-form-item label="价格精确方式" name="pricePrecise">
      <a-select
        placeholder="请选择价格精确方式"
        :options="pricePreciseList"
        v-model="formValue.pricePrecise"
      />
    </a-form-item>

    <a-form-item label="显示市场价" name="isMarketPrice">
      <a-switch v-model="formValue.isMarketPrice" />
    </a-form-item>

    <a-form-item :wrapperCol="{ offset: 5 }">
      <a-button type="primary" @click="formSubmit">更新显示信息</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const rules = {
    name: {
      required: true,
      message: '请输入网站名称',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };
  const watermarkPlaceList = [
    {
      label: '左上',
      value: 1,
    },
    {
      label: '右上',
      value: 2,
    },
    {
      label: '居中',
      value: 3,
    },
    {
      label: '右下',
      value: 4,
    },
  ];

  const pricePreciseNumList = [
    {
      label: '2位',
      value: 1,
    },
    {
      label: '3位',
      value: 2,
    },
    {
      label: '4位',
      value: 3,
    },
  ];
  const pricePreciseList = [
    {
      label: '四舍五入',
      value: 1,
    },
    {
      label: '向上取整',
      value: 2,
    },
    {
      label: '向下取整',
      value: 3,
    },
  ];

  const formRef: any = ref(null);

  const formValue: any = reactive({
    bigWidth: '',
    bigHeight: '',
    smallWidth: '',
    smallHeight: '',
    watermarkClarity: null,
    pricePrecise: 1,
    isMarketPrice: true,
    pricePreciseNum: null,
  });

  function formSubmit() {
    formRef.value
      .validate()
      .then(() => {
        Message.success('验证成功');
      })
      .catch((error) => {
        console.log('error', error);
        Message.error('验证失败，请填写完整信息');
      });
  }
</script>
